<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #boll {
            width: 100px;
            height:100px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="boll" style="left: 200px;top:0px;"></div>
x:<input type="text" id="x"><br>
y:<input type="text" id="y"><br>
<input type="button" value="移动" onclick="move()">
<script>
    function move(){
        var xObj = document.getElementById('x');        //文本框中，要移动的横向位置的对象
        var yObj = document.getElementById('y');        //文本框中，要移动的纵向位置的对象
        var x = xObj.value;                              //文本框中，要移动的横向位置，字符型使用typeof x 看看
        var y = yObj.value;                              //文本框中，要移动的纵向位置，字符型

        var bollObj = document.getElementById('boll');  //小球对象
        console.log(bollObj.style.left);                //小球的left，测试
        console.log(bollObj.style.top);                 //小球的top

        var pp =parseInt(bollObj.style.left)+parseInt(x);
        var dd =parseInt(bollObj.style.top)+parseInt(y);
        bollObj.style.left=pp+"px";
        bollObj.style.top=dd+"px";

        //程序的执行顺序，从上到下
        //变量的声明与赋值
        //+作为数学运算符
        //+作为字符串连接符
        //数据类型的转换

        //对dom对象的初步接触
        // 对象 xObj：  .value属性
        // xObj 对象， style属性，
        // style 也一个对象。 style.top  去掉下滑线，将下滑线后面的单词首字母改成大写_

    }

</script>
</body>
</html>